import React, { useState } from 'react'
import './style.css'
//import PropTypes from 'prop-types'
import { Button, Input } from 'antd'
import JSZip from 'jszip'
import { saveAs } from 'file-saver'
import moment from 'moment'

const { TextArea } = Input;

const ImageSave = () => {

    const [data, setData] = useState('')

    const disposeData = (str = '') => {
        let eleRes = str.split(' ');
        let urlRes = eleRes.filter(item => item.startsWith(`${"src="}`) && item.endsWith(`${'.jpg"'}`) )
        .map(item => item.slice(5, -1))
        return urlRes;
    }
    function getBase64(imgUrl) {
        let p = new Promise((resolve) => {
            window.URL = window.URL || window.webkitURL;
            var xhr = new XMLHttpRequest();
            xhr.open("get", imgUrl, true);
            // 至关重要
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (this.status === 200) {
                    //得到一个blob对象
                    var blob = this.response;
                    //  至关重要
                    let oFileReader = new FileReader();
                    oFileReader.onloadend = function (e) {
                        let base64 = e.target.result;
                        let res = base64.replace(/^data:image\/(png|jpg|jpeg);base64,/, "");
                        resolve(res);
                    };
                    oFileReader.readAsDataURL(blob);
                }

            }
            xhr.send();
        })
        return p;
    }

    const onTextAreaChange = (value) => {
        setData(value)
    }

    const startZip = async () => {
        let zip = new JSZip();
        const urlList = disposeData(data);
        let index = 1;
        for (let url of urlList) {
            console.log('请求', url);
            const theBase = await getBase64(url);
            zip.file(
                `${moment().format('YYYYMMDD')}-${index}.png`,
                theBase, { base64: true }
            )
            index++;

        }
        /* let testurl= 'https://img.alicdn.com/imgextra/i3/2608575087/O1CN014MoXJY1nRtNypXLwL_!!2608575087.jpg';
        const theBase = await getBase64(testurl);
        zip.file(
            `${moment().format('YYYYMMDD')}-${index}.png`,
            theBase, { base64: true }
        ) */

        zip.generateAsync({
            type: 'blob'
        }).then(content =>
            saveAs(content, `淘宝宝贝详情-${moment().format('YYYYMMDD-HHmmss')}.zip`))

    }

    return (
        <div className="mainArea">
            <section>
                <TextArea
                    value={data}
                    placeholder="粘贴html代码到此处..."
                    onChange={e => onTextAreaChange(e.target.value)}
                    rows={20}
                />
                <Button
                    type="primary"
                    onClick={() => startZip()}
                >下载</Button>
            </section>
        </div>
    )
}

ImageSave.propTypes = {

}

export default ImageSave
